<template>
  <div class="banner">
    <el-carousel height="620px">
      <el-carousel-item v-for="item in bannerlist" :key="item.id">
        <!--相对路径引用 webpack 帮我们解析时需要使用 require() 把图片路径包裹起来 -->
        <!-- 在public文件夹下是绝对路径，不需要经过webpack -->
        <!-- <img :src="require(`../assets/${item.img_url}`)" alt=""> -->
        <img :src="require(`/src/assets/images/${item.img_url}`)" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import {ref} from 'vue'

let bannerlist = ref([
  {id: 1, img_url: 'banner1.jpg'},
  {id: 2, img_url: 'banner2.jpg'},
  {id: 3, img_url: 'banner3.jpg'},
  {id: 4, img_url: 'banner4.jpg'},
  {id: 5, img_url: 'banner5.jpg'},
])
</script>

<style>

</style>
